<template>
	<view class="componentBox">
		<slot></slot>
		<view class="backgroundBox">
			<view class="background" v-for="item in domList" :style="[item]" :key="item">
				<view>{{ userInfo.name }}</view>
				<view>{{ userInfo.phone ? userInfo.phone.slice(-4) : '' }}</view>
			</view>
			<image :src="backgroudUrl" class="wg" v-if="backgroudUrl"></image>
			<canvas id="uniGridCanvas" canvas-id="uniGridCanvas" type="2d" class="wg" v-else></canvas>
		</view>
	</view>
</template>

<script>
	/**
	 * @author: 1580043700@qq.com - Zhang Jun
	 * @date: 2023/02/19 10:00
	 * @description: 水印组件
	 */

	export default {
		components: {},
		props: {
			content: {
				type: String,
				default: '人人都是生活家'
			},
			zIndex: {
				type: Number,
				default: 999
			},
			gapX: {
				type: Number,
				default: 0
			},
			gapY: {
				type: Number,
				default: 20
			},
			width: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 30
			},
			alpha: {
				type: Number,
				default: 0.6
			},
			color: {
				type: String,
				default: '#aaa'
			},
			fontSize: {
				type: Number,
				default: 24
			},
			angle: {
				type: Number,
				default: 45
			}
		},
		data() {
			return {
				domList: [],
				side: 0,
				cw: 0,
				ch: 0,
				userInfo: uni.getStorageSync('userInfo'),
				backgroudUrl: '',
			};
		},
		computed: {},
		created() {},
		mounted() {
			this.initData();
			let backgroudUrl = uni.getStorageSync('backgroudUrl')
			console.log(backgroudUrl, 'ssssss');
			if (backgroudUrl) {
				this.backgroudUrl = backgroudUrl;
			} else {
				this.initCanvas();
			}
		},
		destroyed() {},
		methods: {
			initData() {
				uni.getSystemInfo({
					success: (res) => {
						let {
							screenWidth,
							screenHeight
						} = res;

						// 列数
						let arrange = 3;
						let {
							gapX = 0, gapY = 0, width, height, color, alpha, fontSize, angle, zIndex
						} = this;

						let heightNum = Math.ceil(screenHeight / (gapY * 2 + height));
						let widthNum = Math.ceil(screenWidth / (gapX * 2 + (width || screenWidth / arrange)));

						let num = heightNum * widthNum;

						let diagonal = width || screenWidth / arrange;
						this.side = diagonal;

						for (let i = 0; i < num; i++) {
							let mask_div = {};
							mask_div.transform = 'rotate(-' + angle + 'deg)';
							mask_div.visibility = '';
							mask_div.overflow = 'hidden';
							// mask_div.margin = `${gapY}px ${gapX}px`;
							mask_div.zIndex = zIndex;
							mask_div.pointerEvents = 'none';
							mask_div.opacity = alpha;
							mask_div.fontSize = `${fontSize}rpx`;
							mask_div.fontFamily = '微软雅黑';
							mask_div.color = color;
							mask_div.width = diagonal + 'px';
							// mask_div.height = height + gapY * 2 + 'px';
							mask_div.height = diagonal + 'px';

							this.domList.push(mask_div);
						}
					}
				});
			},

			// 初始化画布
			async initCanvas() {
				const sysInfo = uni.getSystemInfoSync();
				this.dpr = sysInfo.pixelRatio || 1;

				const query = uni.createSelectorQuery().in(this);
				query
					.select('.wg')
					.boundingClientRect(async (res) => {
						this.cw = res.width;
						this.ch = res.height;

						await this.drawMP();
					})
					.exec();
			},
			// 小程序绘制方法
			async drawMP() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#uniGridCanvas').fields({
					node: true,
					size: true
				}).exec(async (res) => {
					const canvas = res[0].node;
					const ctx = canvas.getContext('2d');

					canvas.width = this.cw * this.dpr;
					canvas.height = this.ch * this.dpr;
					ctx.scale(this.dpr, this.dpr);

					this.drawCrossGrid(ctx);

					uni.canvasToTempFilePath({
						canvas,
						success: (res) => {
							console.log(res.tempFilePath);
							uni.setStorageSync('backgroudUrl', res.tempFilePath);
							this.backgroudUrl = res.tempFilePath
						}
					}, this);
				});
			},
			// 绘制交叉网格
			drawCrossGrid(ctx) {
				ctx.strokeStyle = 'rgba(170, 170, 170, 0.2)';
				ctx.lineWidth = 1;

				// 正斜线
				// this.drawAngleLines(ctx, this.angle);
				// 反斜线
				// this.drawAngleLines(ctx, -this.angle);
			},
			// 按角度绘制斜线
			drawAngleLines(ctx, angle) {
				const radian = (angle * Math.PI) / 180;
				const step = this.side;

				ctx.beginPath();
				let ch = this.side * 10;
				let cw = this.side * 10;
				// 纵向延伸
				for (let y = -ch; y < ch * 2; y += step) {
					const x1 = 0;
					const x2 = cw;
					ctx.moveTo(x1, y);
					ctx.lineTo(x2, y + Math.tan(radian) * cw);
				}
				ctx.stroke();
			}
		},
	};
</script>

<style scoped lang="scss">
	.componentBox {
		position: relative;
		width: 100vw;

		.backgroundBox {
			position: fixed;
			left: 0;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			pointer-events: none;
			display: flex;
			flex-wrap: wrap;
			// z-index: 10;
			opacity: 0.4;

			.wg {
				position: absolute;
				width: 1000px;
				height: 1000px;
				// background: 
				//     /* 基础菱形单元 */ linear-gradient(45deg, transparent 45%, #f2f2f2 50%, transparent 55%) 0 0 / 10px 10px,
				// 	/* 反向渐变补充 */ linear-gradient(-45deg, transparent 45%, #f2f2f2 50%, transparent 55%) 0 0 / 10px 10px;
			}

			.background {
				position: relative;
				z-index: 2;
				box-sizing: border-box;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				pointer-events: none;
				flex-flow: column;
				background-attachment: fixed;
				background-repeat: repeat;
				background-origin: content-box;
				background-position: center;
			}
		}
	}

	.border {
		position: absolute;
		background-color: #999;
		box-sizing: border-box;
	}
</style>